import { useState } from 'react'
import { useMount, useReactive } from 'ahooks';
import { Switch, Radio } from 'antd';
import { MultiRow } from '@grapecity/wijmo.react.grid.multirow';
import { MultiRowConfig } from '../Data'
import { CollectionView } from '@grapecity/wijmo';
const WijmoN03 = () => {

    const InitData = useReactive({
        init: null
    })

    const [Status, setStatus] = useState(true)
    const [Data, setData] = useState()
    const [TableType, setTableType] = useState()

    useMount(() => {
        const { TableType, data } = MultiRowConfig(50)
        setData(new CollectionView(data, { groupDescriptions: ['customer.city'] }))
        setTableType(TableType.Detailed)
    })


    const onStatus = (e) => {
        setStatus(e)
        const init = InitData.init
        init.showGroups = e
        InitData.init = init
    }

    const onChange = (e) => {
        const init = InitData.init
        if (e.target.value) init.collapseGroupsToLevel(10)
        else init.collapseGroupsToLevel(0)
    }
    const initialized = (e) => { InitData.init = e }

    return (
        <div className="Page">
            <MultiRow
                itemsSource={Data}
                layoutDefinition={TableType}
                groupHeaderFormat="{name}: <b>{value} </b>({count:n0} items)"
                initialized={initialized}
            />




            <div className="Label">
                <label htmlFor=""> 展示分组 </label>
                <Switch defaultChecked={Status} onChange={onStatus} />
            </div>
            {Status &&
                <div className='center'>
                    <Radio.Group onChange={onChange} defaultValue={true}>
                        <Radio.Button value={true}>展开全部</Radio.Button>
                        <Radio.Button value={false}>折叠全部</Radio.Button>
                    </Radio.Group>
                </div>}
        </div>
    );
};

export default WijmoN03